<template>
	<view>
		<navbar :title='title' backgroundColor='#566FFF'>
		</navbar>
		<view class="content">
			<view class="head">
				<view class="headview">
					<u-tabs style="margin-bottom: 30rpx;" inactive-color='#AEB0BF' active-color='#566FFF' :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
				</view>
				
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in 10" :key="index">
					<text>沪银2212</text>
					<view class="zegjiview" v-if="index == 1">
						<image src="/static/qi/check.png" mode="" class="zegji"></image>
					</view>
					<view class="zegjiview" v-else>
						<image src="/static/qi/zegji.png" mode="" class="zegji"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'添加自选',
				list: [{
					name: '主力合约'
				}, {
					name: '上期所'
				}, {
					name: '大商所'
				},{
					name: '上期能源'
				},{
					name: '中金所'
				}],
				current: 0
			};
		},
		methods:{
			change(index) {
				this.current = index;
			},
		}
	}
</script>

<style lang="scss" scoped>
  .content{
	  .head{
		  position: fixed;
		  width: 100%;
		  height: 90rpx;
		  box-shadow: 0px 4rpx 10rpx 0px rgba(86,111,255,0.1);
		  .headview{
			  position: relative;
		  }
	  }
	  .list{
		  position: relative;
		  display: flex;
		  flex-direction: column;
		  padding: 0rpx 20rpx;
		  .item{
			  width: 100%;
			  height: 100rpx;
			  display: flex;
			  
			  flex-direction: row;
			  align-items: center;
			  border-bottom: 1rpx solid #EEEEEE;
			  .tit{
				  font-size: 26rpx;
				  font-family: PingFang SC-中等, PingFang SC;
				  font-weight: 500;
				  color: #373A4D;
			  }
			  .zegjiview{
				  margin-left: auto;
				  .zegji{
					  width: 40rpx;
					  height: 40rpx;
				  }
			  }
		  }
	  }
  }
</style>
